<template>
    <div class="app-container calendar-list-container">
        <!-- 搜索工具栏 -->
        <section>
            <so-tool-bar :toolData="toolData" :query="listQuery" @search="search" />
        </section>
        <!-- 其他操作 -->
        <section class="filter-container">
            <el-button type="danger" @click="delRows">批量删除</el-button>
            <el-button type="primary" @click="openForm('add')">新增</el-button>
        </section>
        <!-- 表格 -->
        <el-table :data="tableList" v-loading="loading" element-loading-text="正在查询中。。。" stripe highlight-current-row @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" width="55" />
            <el-table-column align="center" label="组织名称" prop="organization_name" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" label="负责人姓名" prop="director" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" label="联系电话" prop="telephone">
            </el-table-column>
            <el-table-column align="center" label="组织图片">
                <template slot-scope="{row}">
                    <img class="table-img" :src="row.file_path" alt="">
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="150px">
                <template slot-scope="{row}">
                    <el-button type="text" size="mini" @click="openForm('edit', row)">编辑</el-button>
                    <el-button type="text" size="mini" @click="delRow(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <section>
            <so-pagination :query="listQuery" @initList="initList" />
        </section>
        <!-- 发布活动 -->
        <section>
            <el-dialog :visible.sync="dialog.isShow" :show-close="false" :fullscreen="fullscreen" :before-close="beforeClose">
                <el-row slot="title">
                    <el-col :span="10" style="padding-top: 5px">
                        <span style="font-size: 18px;">{{dialog.title}}</span>
                    </el-col>
                    <el-col :span="2" :offset="11">
                        <el-button type="text" v-if="!fullscreen" icon="iconfont ali-quanping" @click="fullscreen = true" style="float: right"></el-button>
                        <el-button type="text" v-else icon="iconfont ali-zuixiaohua" @click="fullscreen = false" style="float: right"></el-button>
                    </el-col>
                    <el-col :span="1">
                        <el-button type="text" icon="iconfont ali-guanbi" @click="dialog.isShow = false" style="float: right"></el-button>
                    </el-col>
                </el-row>
                <el-form :model="form" ref="createOrg" label-width="100px">
                    <el-form-item label="组织名称" prop="organization_name" :rules="filter_rules({required:true})">
                        <el-input clearable style="width: 300px;" placeholder="请输组织名称" v-model.trim="form.organization_name">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="负责人姓名" prop="director">
                        <el-input clearable style="width: 300px;" placeholder="请输负责人姓名" v-model.trim="form.director">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="telephone">
                        <el-input clearable style="width: 300px;" placeholder="请输联系电话" v-model.trim="form.telephone">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="组织图片" prop="file_path" :rules="filter_rules({type: 'upload'})">
                        <img v-if="form.file_path" :src="form.file_path" class="avatar" @click="sizeSet">
                        <i v-else class="el-icon-plus avatar-uploader-icon" @click="sizeSet"></i>
                    </el-form-item>
                    
                    <el-form-item label="详情介绍">
                        <UE @showUpload="showUpload" :defaultMsg.sync='defaultMsg' ref="ue"></UE>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialog.isShow = false">取 消</el-button>
                    <el-button type="primary" @click="validate('createOrg')">保 存</el-button>
                </span>
            </el-dialog>
        </section>
        <section>
            <size-temp ref="size" :img.sync="form.file_path" title="图片设置"></size-temp>
        </section>
        <section>
            <UeUpload ref="vupload" @addUeditorImg="addUeditorImg" img="卐" title="添加图片"></UeUpload>
        </section>
    </div>
</template>
<script>
import SoPagination from "@/components/SoPagination";
import SoToolBar from "@/components/SoToolBar";
import UeUpload from '@/components/UeUpload'
import sizeTemp from '@/components/draggableSize/index2';
import UE from '@/components/Ueditor';
import { searchTool } from "@/utils";
import { organization_list, organization_edit, organization_delete, organization_save, organization_deleteAll } from '@/api/organization'
export default {
    data() {
        return {
            loading: false,
            toolData: [{ el: 'input', label: '组织', model: 'organization_name' },{ el: 'input', label: '负责人', model: 'director' }],
            listQuery: { start: 0, limit: 10, total: 0, current: 1 },
            multipleSelection: [],
            tableList: [],
            dialog: { isShow: false },
            fullscreen: false,
            ossPublicUrl: localStorage.getItem("ossPublicUrl"),
            form: { file_path: '' },
            defaultMsg: ''
        }
    },
    components: {
        SoPagination,
        SoToolBar,
        sizeTemp,
        UE,
        UeUpload
    },
    methods: {
        showUpload() {
            this.$refs.vupload.open()
        },
        addUeditorImg(val) {
            this.$refs.ue.addToContent(`<img src="${val}">`)
        },
        beforeClose(done) {
            this.$refs.ue.clear();
            done()
        },
        sizeSet() {
            this.$refs.size.open()
        },
        async openForm(e, row) {
            if (e == 'edit') {
                this.dialog.title = '编辑'
                this.form = row;
                this.defaultMsg = row.organization_desc;
                this.$nextTick(_ => {
                    this.$refs.ue.setContent(this.defaultMsg)
                });
            } else {
                this.defaultMsg = '';//清空富文本
                this.dialog.title = '新增'
                this.form = { file_path: '' };
                this.$nextTick(_ => {
                    this.$refs.ue.setContent('<br/>'); //清空富文本
                });
            }
            this.dialog.isShow = true;
        },
        validate(e) {
            this.form.organization_desc = this.$refs.ue.getContent(); //富文本内容
            this.$refs[e].validate(valid => {
                if (valid) {
                    if (this.dialog.title == '编辑') {
                        this.editObj();
                    } else {
                        this.saveObj();
                    }
                    this.dialog.isShow = false;
                } else {
                    return false;
                }
            });
        },
        async saveObj() {
            this.loading = true;
            let params = { ...this.form, company_id: localStorage.getItem("companyId")-0 }
            const { data } = await organization_save(params);
            this.loading = false;
            if (data.status === 100) {
                this.$message.success("添加成功");
                this.initList();
            }
        },
        async editObj() {
            const { data } = await organization_edit(this.form);
            if (data.status === 100) {
                this.$message.success("编辑成功");
                this.initList();
            }
        },
        async delRow(row) {//删除
            try {
                let res = await this.$confirm("确认删除吗？");
                if (res == "confirm") {
                    this.loading = true;
                    let { data } = await organization_delete(row);
                    if (data.status == 100) {
                        this.$message.success("删除成功");
                    }
                    this.initList();
                }
            } catch (error) { }
        },
        async delRows() {//批量删除
            if (this.multipleSelection.length == 0) {
                this.$message.warning("请先选择需要调整单元");
                return;
            }
            const ids = this.multipleSelection.map(item => item.id).join();
            try {
                const res = await this.$confirm("确认删除吗？");
                if (res == "confirm") {
                    this.loading = true;
                    const { data } = await organization_deleteAll({ array: ids });
                    if (data.status == 100) {
                        this.$message.success("删除成功");
                    }
                    this.initList();
                }
            } catch (error) {
                console.log(error, "error");
            }
        },
        handleSelectionChange(e) {
            this.multipleSelection = e;
        },
        search() {//搜索
            this.listQuery = searchTool(this.listQuery);
            this.initList();
        },
        async initList() {
            this.loading = true;
            const query = { ...this.listQuery, company_id: localStorage.getItem("companyId") - 0 };
            const { data } = await organization_list(query);
            this.loading = false;
            if (data.status == 100) {
                this.tableList = data.data.rows;
                this.listQuery.total = data.data.results;
            }
        }
    },
    created() {
        this.initList();
    }
}
</script>
<style lang="scss" scoped>
$border: 1px dashed #d9d9d9;
$picture-size: 120px;
$color: #606266;
span {
    font-size: 13px;
    color: $color;
}

.ali-zhiding {
    color: #009900;
    font-size: 20px;
}

.avatar-uploader {
    .el-upload {
        border: $border;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
            border-color: #409eff;
        }
    }
}

.avatar-uploader-icon {
    border: $border;
    font-size: 28px;
    color: #8c939d;
    width: $picture-size;
    height: $picture-size;
    line-height: $picture-size;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

.avatar {
    width: 60%;
    display: block;
    border-radius: 5px;
    cursor: pointer;
}

.table-img {
    width: 50px;
    height: 50px;
}
</style>